import { Link } from 'libframe-docs/components'

## Built-in

 - **`pageContext.Page`**: the `export { Page }` or `export default` of the page's `.page.js` file.
 - **`pageContext.pageExports`**: all exports of the page's `.page.js` file.
 - **`pageContext.routeParams`**: the route parameters. (E.g. `pageContext.routeParams.movieId` for a page with a Route String `/movie/:movieId`.)
 - **`pageContext.isHydration`** [*Only when using [Client Routing](/useClientRouter) and only in the browser*]: boolean that is `true` if the current page is already rendered to HTML. (Usually: `true` for the first page the user navigates to and `false` when the user navigates to a new page.)
 - **`pageContext.url`**: The `url` we passed at the server middleware.
    ```js
    const renderPage = createPageRenderer(/*...*/)
    // Server middleware
    app.get('*', async (req, res, next) => {
      const pageContextInit = {}
      // `pageContext.url` is defined here
      pageContextInit.url = req.url
      const result = await renderPage(pageContextInit)
      /* ... */
    })
    ```
    When using [Client Routing](/useClientRouter), the value of `pageContext.url` in the browser is the current URL. (Either `window.location.href`, or the `href` value of the `<a href="/some/url">` link the user clicked on, or the value passed to `navigate('/some/url')`, or the URL of the browser's back/forward history navigation.)
 - **`pageContext.urlPathname`**: the URL's pathname. (E.g. `/product/42` if `pageContext.url === 'https://example.com/product/42?details=yes#reviews'`).
 - **`pageContext.urlParsed`**: URL information:
   ```ts
   {
     origin: null | string
     pathname: string
     search: Record<string, string>
     hash: string
   }
   ```
   For example:
   ```js
   // https://example.com/product/42?details=yes#reviews
   {
     origin: 'https://example.com',
     pathname: '/product/42',
     search: { details: 'yes' },
     hash: 'reviews'
   }
   ```
   It also provides lower-level infos (which you'll likely not need).
   ```ts
   {
     pathnameWithBaseUrl: string
     hasBaseUrl: boolean // (Almost always `true`)
     searchString: null | string
     hashString: null | string
   }
   ```
   For example, if we want the ordered list of all search parameter values, we can use `new URLSearchParams(pageContext.urlParsed.searchString || '')`.

## Custom

In addition to the built-in `pageContext` values set by `vite-plugin-ssr`, we can define custom `pageContext` values at:
 - Hooks: [`onBeforeRender()`](/onBeforeRender) and [`render()`](/render).
    ```js
    export function onBeforeRender() {
      return {
        pageContext: {
          // We can define some custom `pageContext` here
        }
      }
    }
    ```
    ```js
    export function render() {
      return {
        documentHtml: escapeInject`<html><!--...--></html>`,
        pageContext: {
          // We can define some custom `pageContext` here
        }
      }
    }
    ```
 - Server middleware.
    ```js
    const renderPage = createPageRenderer(/*...*/)
    // Server middleware
    app.get('*', async (req, res, next) => {
      const pageContextInit = {
        url: req.url,
        // We can define some custom `pageContext` here
      }
      const pageContext = await renderPage(pageContextInit)
      /* ... */
    })
    ```

## Browser


When using <Link href="/server-routing" noBreadcrumb={true} />, the following is available in the browser:
 - `pageContext.Page`
 - `pageContext.pageExports`

When using <Link href="/client-routing" noBreadcrumb={true} />, the following is available in the browser:
 - `pageContext.Page`
 - `pageContext.pageExports`
 - `pageContext.isHydration`
 - `pageContext.routeParams`
 - `pageContext.url`
 - `pageContext.urlPathname`
 - `pageContext.urlParsed`

All other `pageContext` are only available in Node.js by default:
we use [`passToClient`](/passToClient) to make more `pageContext` available in the browser.

## TypeScript

TypeScript utility types:

```ts
// Server-side `pageContext` built-in values
import type { PageContextBuiltIn } from 'vite-plugin-ssr'

// Client-side `pageContext` built-in values, when using Server Routing
import type { PageContextBuiltInClient } from 'vite-plugin-ssr/client'

// Client-side `pageContext` built-in values, when using Client Routing
import type { PageContextBuiltInClient } from 'vite-plugin-ssr/client/router'
```
